var fontscolor=['#333','#024891']
var colors=['#7a5ef5','#fc8b63','#9bdafe','#ffba88','#fd9b82'];//定义线条颜色

var option01 = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['访问量(次数)'],
            bottom: "25px",
            textStyle: {
                color: '#333',
            },
            top:26,
            right:18,
        },
        grid: {
            // show:true,
            top: 90,
            bottom:90,
            left:55,
            right:20,
        },
       
        xAxis: {
            type: 'category',
            data:[],
            axisLine: {
                lineStyle: {
                    color: "#5095ff",
                    width:2,
                }
            },
            axisTick: {
                inside: false,
                length: 5,
            },
            axisLabel: {
                interval:0,
                rotate:25,
                textStyle: {
                    color: '#333',
                    fontSize:12,
                },
                margin:12,
            }
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: "#fff"
                }
            },
            axisTick: {
                show: false,
                inside: true,
                length: 5,
            },
            axisLabel: {
                textStyle: {
                    color: '#333',
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#e4e4e4',
                }
            },
        },
  
        series: [{
            name: '访问量(次数)',
            type: 'line',
            markPoint:{
                symbol:'rect',
            },
             markPoint:{
                symbol:'rect',
            },
            barWidth:6,
            smooth: true,
            data: [],
            itemStyle: {normal: {color: colors[0],}},
            showSymbol: false,
        }]  
    };

var myChart01 = echarts.init(document.getElementById('myChart01'));

myChart01.setOption(option01);

 

function loadLogTrend(myChart,option){
   var district = $("#district").val();  
   var districtName = $("#district").find("option:selected").text(); 
   if(district == null || district == ''){
	   districtName = "全国";
   }
	$.ajax({
		type : "post",
		url : basePath+"/log/getLogTrend",
		dataType : "json",
		data : {district:district},
		//后台所需要的参数
		success : function(data) {
			if(data != null){
				
				$("#pvlable").text(districtName+"近三十天访问趋势");
				
				var days=[];
				var pvcount=[];
				for(var i=0;i<data.length;i++){
					days[i]=data[i].accessTime;
					pvcount[i]=data[i].pvCount;
				}
				
				option01.xAxis.data=days;
				option01.series[0].data=pvcount;
				myChart01.setOption(option01);
			}
		}
	});
}


$(function () {  
    
	 //查询按钮事件  
    $("#searchBtn").off().on("click",function(){  
        var district = $("#district").val();  
    	loadLogTrend(myChart01,option01);
        
    });  
    
    //重置按钮事件  
    $("#resetBtn").off().on("click",function(){  
        document.getElementById("district").options.selectedIndex = 0; //回到初始状态
    })
    
  
    loadLogTrend(myChart01,option01);
});  
